Pool Overview redesign #2435

kattylucy · 2024-09-06T15:05:29Z

Redesign for pool overview page

https://www.figma.com/design/ng7qdNcSCXSDA6ZUdWIs6u/Pool-Overview%2F-Pool-Detail?node-id=2802-6256&node-type=frame&t=HdoH2YlSaWxLKG0U-0

#2427

Dev

github-actions · 2024-09-06T15:11:23Z

PR deployed in Google Cloud
URL: https://pr2435-app-ff-production.k-f.dev
Commit #: eac775f
To access the functions directly check the corresponding deploy Action

github-actions · 2024-09-06T15:12:18Z

PR deployed in Google Cloud
URL: https://app-pr2435.k-f.dev
Commit #: eac775f
To access the functions directly check the corresponding deploy Action

…redesign

…for invest/redeem

sophialittlejohn · 2024-10-01T15:28:16Z

centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

  const data: ChartData[] = React.useMemo(
    () =>
-      truncatedPoolStates?.map((day) => {
+      truncatedPoolStates?.map((day: any) => {


Suggested change

truncatedPoolStates?.map((day: any) => {

truncatedPoolStates?.map((day) => {

better to make sure truncatedPoolStates is typed rather than casting day as any

sophialittlejohn · 2024-10-01T16:14:49Z

centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

+    <Box width="8px" height="8px" borderRadius="50%" backgroundColor={color} marginRight="4px" />
+  )
+
+  const navObj = {


Suggested change

const navObj = {

const navData = {

for consistency though out

sophialittlejohn · 2024-10-01T16:15:13Z

centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

+
+  const graphData = selectedTabIndex === 0 ? tokenData : apyData
+
+  const toggleRange = (e: any) => {


let's try and avoid anys please!

sophialittlejohn · 2024-10-01T16:15:25Z

centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

-    </Shelf>
+    <Box display="flex" justifyContent="space-between" alignItems="center">
+      <Box display="flex" justifyContent="space-evenly">
+        {graphData.map((item: any, index: any) => {


sophialittlejohn · 2024-10-01T16:17:44Z

centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx

+type DailyPoolStateProps = {
+  timestamp: string
+  tranches: { [trancheId: string]: TrancheState }
+  apy?: Perquintill | undefined
+}


rather build the type from the existing dailyPoolState using Pick or Omit so that we can more easily catch changes if they were to happen

for TrancheState as well

sophialittlejohn · 2024-10-01T16:18:37Z

centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx

  const data = React.useMemo(() => {
    const tokenData =
-      dailyPoolStates?.map((state) => {
-        return { price: state.tranches[trancheId].price?.toFloat() || 0, day: new Date(state.timestamp) }
+      dailyPoolStates?.map((state: DailyPoolStateProps) => {


Suggested change

dailyPoolStates?.map((state: DailyPoolStateProps) => {

dailyPoolStates?.map((state) => {

again this type should be interfered if dailyPoolStates is type properly

sophialittlejohn · 2024-10-01T16:21:01Z

centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx

 import { Spinner } from '../Spinner'
+import { Tooltips } from '../Tooltips'
+
+const StyledPillButton = styled(PillButton)`


seems this can be removed?

sophialittlejohn · 2024-10-01T16:21:35Z

centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx

+interface DailyTrancheState {
+  yield30DaysAnnualized: Perquintill
+  timestamp: string
+}

-  function hasValuationMethod(pricing: any): pricing is { valuationMethod: string } {
-    return pricing && typeof pricing.valuationMethod === 'string'
+type DailyTrancheStateArr = Record<string, DailyTrancheState[]>
+
+type Tranche = {
+  currency: {
+    name: string
  }
+  id: string
+}


also here best to build the types from existing ones rather than redeclaring, recommend using Pick or Omit

sophialittlejohn · 2024-10-01T16:25:16Z

centrifuge-app/src/pages/IssuerCreatePool/CustomCategories.tsx

+  const fmk = useFormikContext<PoolMetadataInput>()
+  const { values } = fmk
+
+  console.log('FORM', values)


Base automatically changed from add_tile_design to main September 10, 2024 14:13

kattylucy changed the title ~~Style new header~~ Pool Overview redesign Sep 10, 2024

kattylucy force-pushed the pool_overview_redesign branch 11 times, most recently from 1013fe1 to a392405 Compare September 16, 2024 19:41

kattylucy added 6 commits September 16, 2024 15:07

Style new header

1e7a416

Pool performance chart

97530da

Key metrics redesign

700955b

WIP - tranche tokens table

1cd9072

Issuer and reports redesign

8dde4b4

Redesign transaction history table

1181892

kattylucy force-pushed the pool_overview_redesign branch from 66fc7a5 to 1181892 Compare September 17, 2024 15:51

Add new fields [wip]

35bc8e6

kattylucy force-pushed the pool_overview_redesign branch from 909545e to 35bc8e6 Compare September 17, 2024 20:23

sophialittlejohn mentioned this pull request Sep 17, 2024

Edit pool fields #2455

Merged

1 task

sophialittlejohn added 5 commits September 18, 2024 15:15

Merge branch 'main' of github.com:centrifuge/apps into pool_overview_…

ec4bcbd

…redesign

Add custom categories to metadata

b0f5e8b

Clean up KeyMetrics and Issuer section

4ee4d39

Clean up edit view

fe28ce5

Add pool structure from metadata

4675273

sophialittlejohn added 5 commits September 19, 2024 12:22

Hook up invest button

8cecab3

Fix APY data from subquery

4067168

Fix chart initial load and fix types

bcfb855

Fix hex conversion for 30 day yield

d8edca4

Remove altair themes, update input and tooltip styles, update styles …

2a138bd

…for invest/redeem

kattylucy force-pushed the pool_overview_redesign branch from c29f491 to dbe5c48 Compare September 24, 2024 09:09

kattylucy marked this pull request as ready for review September 24, 2024 09:09

kattylucy requested review from onnovisser and sophialittlejohn September 24, 2024 09:09

kattylucy force-pushed the pool_overview_redesign branch from dbe5c48 to 58bf009 Compare September 24, 2024 09:15

kattylucy added 3 commits September 26, 2024 12:05

Issuer details and bug fixes

eba6d48

remove tvl

465fd1b

Add apy to graph

4afb124

kattylucy force-pushed the pool_overview_redesign branch from 90bc09f to 4afb124 Compare September 26, 2024 10:41

sophialittlejohn reviewed Oct 1, 2024

View reviewed changes

Cleanup types

83ca38e

kattylucy requested review from sophialittlejohn and removed request for onnovisser and sophialittlejohn October 2, 2024 08:45

Fix invest button bug

eac775f

kattylucy requested a review from sophialittlejohn October 2, 2024 13:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pool Overview redesign #2435

Pool Overview redesign #2435

kattylucy commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

	truncatedPoolStates?.map((day: any) => {
	truncatedPoolStates?.map((day) => {


		const graphData = selectedTabIndex === 0 ? tokenData : apyData

		const toggleRange = (e: any) => {

	dailyPoolStates?.map((state: DailyPoolStateProps) => {
	dailyPoolStates?.map((state) => {

Pool Overview redesign #2435

Are you sure you want to change the base?

Pool Overview redesign #2435

Conversation

kattylucy commented Sep 6, 2024 • edited Loading

github-actions bot commented Sep 6, 2024 • edited Loading

github-actions bot commented Sep 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kattylucy commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading